<template>
  <div class="box">
    <TitleCom>
      <div class="btn" @click="goRouter">招聘广场</div>
    </TitleCom>  
    <div class="sleect-box">
      <div class="search-box">
        <input type="text" placeholder="招聘实习生">
        <img @click="getJobList" src="../assets/search.png" alt="">
      </div>
      <div class="list-box">
        <div class="list" v-for="i in selectKey" :key="i.key">
          <span class="label">{{i.name}}：</span>
           <!-- active逻辑  select是用于存放点击时的项 [i.inp]获取对应key中value
           预设每个没空(active为不限),点击时select对应可以改变(getSelectData())实现active-->
          <span :class="{active:!select[i.inp]}">不限</span>
          <span :class="{active:select[i.inp] === s}" v-for="(s,index) in options[i.key]" :key="index" @click="getSelectData(s,i.inp)">{{s}}</span>
        </div>
      </div>
      <div class="jobs-list">
        <div v-for="i in jobs" :key="i.id" class="list">
          <div class="left">
            <span class="job-name">{{i.jobName}}</span>
            <span class="pay-num">{{i.payMin}}K - {{i.payMax}}K</span>
            <span class="welfare-box">
              <font v-for="(v,index) in getWelfare(i.welfare)" :key="index">{{v}}</font>
            </span>
          </div>
          <div>
            <span> {{i.workPosition}}</span>
            <span> {{i.publishTime}}</span>
          </div>
          <div class="btn">
            申请
          </div>
        </div>
      </div>
    </div> 
  </div>

</template>

<script  lang="ts">
import {defineComponent, reactive,onMounted,toRefs} from 'vue'
import {useRouter} from 'vue-router'
import TitleCom from '@/components/TitleCom.vue'
import {getJob,getRequirement} from '../http/job'
import {selectKeyOptionInt,Initdata} from '../types/index'

export default defineComponent({
  components:{TitleCom},
  setup(){
    const router = useRouter();

    //Initdata是所有数据的类
    const data = reactive(new Initdata())
    onMounted(()=>{
      //获取列表数据
      getJobList({})
      //获取选项数据
      getRequirement().then((res:any)=>{
        data.options = res;
      })
    })
    //将数据 'xx,xx,xx' 切割为数组渲染
    const getWelfare = (str:string):string[] =>{
      console.log(str);
      
      return str.split(',')
    } 

    //跳转到招聘页面
    const goRouter = ()=>{
      router.push('./release')
    }

    //获取列表数据
    const getJobList = (httpData:any):void=>{
        console.log(httpData);
        getJob(httpData).then((res:any)=>{
        data.jobs = res.data;
        console.log(data.jobs);
        
      })
    }

    //点击选项查询数据
    const getSelectData = (str:string,type:string)=>{
      //如果不在selectTypeInt中添加一个选项的情况下可以这样写断言
      // const sk:keyof selectTypeInt = type as keyof selectTypeInt
      // const v:never = str as never
      // data.select[sk]  = v
      //修改数据
      data.select[type] = str
      console.log( data.select);
      //获取数据
      getJobList(data.select)
      
    }

    // const selectKey:Array<selectKeyOptionInt> = [
    const selectKey:selectKeyOptionInt[] = [
      {
          key:'WorkingYears',
          name:"工作经验",
          inp:"workingYear"
      },
      {
          key:'PayFilter',
          name:"薪资范围",
          inp:"payArea"
      },
      {
          key:'PayMonths',
          name:"薪次",
          inp:"payMonth"
      }
    ]

        
    return{
      ...toRefs(data),
      selectKey,
      getWelfare,
      goRouter,
      getSelectData,
      getJobList
    }
  }
})
</script>

<style lang="scss" scoped>
.btn{
    font-size: 18px;
    font-weight: 600;
    color: cadetblue;
    border:1px solid cadetblue;
    cursor: pointer;
    padding:10px 15px;
    border-radius: 5px;
}
.box{
    width: 1000px;
    margin: 0 auto;
    box-shadow: 0 6px 18px #999;
}
.search-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #999;
    margin:35px;
    padding: 0 20px;
    border-radius: 20px;
    input{
        border: none;
        outline: none;
        margin-right: 10px;
    }
    img{
        height: 40px;
    }
}
.list-box{
    padding:0 20px ;
    .list{
        margin-top: 10px;
        span{
            margin-right: 15px;
            cursor: pointer;
            &.active{
                color: cadetblue;
            }
        }
        .label{
            color: #999;
            margin-right: 3px;
        }
    }

}
.jobs-list{
    padding: 0 20px;
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 10px;
        border-bottom: 1px solid #efefef;
        font-size: 14px;
        >div{
            display: flex;
            flex-direction: column;
            &.btn{
                display: inline-block;
                text-align: center;
                width: 70px;
                background: cadetblue;
                color: #fff;
            }
            span{
               line-height: 28px;
            }
            .job-name{
                font-weight: 600;
                font-size: 16px;
            }
            .pay-num{
                color: burlywood;
                font-weight: 400;
            }
            .welfare-box{
                display: flex;
                font{
                    background: #efefef;
                    padding: 0 5px;
                    font-size: 13px;
                    border-radius: 5px;
                    margin-right: 15px;

                }
            }
        }
    }
}
</style>